CSS Regionsμ κ°λ ₯ν κΈ°λ₯μ νμ©νμ¬ μ½ν μΈ νλ¦κ³Ό λ μ΄μμ λμμΈμ νμ νκ³ , μνν ν¬λ‘μ€νλ«νΌ μ¬μ©μ κ²½νμ μ 곡νμΈμ. μ€μ©μ μΈ μμ μ κΈλ‘λ² μ μ© μ¬λ‘λ₯Ό νμν©λλ€.
CSS Regions: μ½ν μΈ νλ¦κ³Ό κ³ κΈ λ μ΄μμ κ΄λ¦¬ λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ μΉ κ°λ° νκ²½μμ, λ§€λ ₯μ μ΄κ³ μκ°μ μΌλ‘ λ°μ΄λ μ¬μ©μ κ²½νμ λ§λλ κ²μ 무μλ³΄λ€ μ€μν©λλ€. CSS3 μ¬μμ κΈ°λ₯ μ€ νλμΈ CSS Regionsλ μ κ΅ν λ μ΄μμμ ꡬννκ³ μ½ν μΈ νλ¦μ μ μ΄νλ κ°λ ₯ν μλ¨μ μ 곡νμ΅λλ€. CSS Regionsμ μ΄κΈ° ꡬνμ CSS Gridλ Flexboxμ κ°μ λ€λ₯Έ κΈ°μ μ λ°λ € λ μ΄μ μ¬μ©λμ§ μμ§λ§, κ·Έ ν΅μ¬ κ°λ μ μ΄ν΄νλ©΄ μ΅μ λ μ΄μμ κΈ°μ κ³Ό μ½ν μΈ μ‘°μμ λν μ΄ν΄λ₯Ό ν¬κ² λμΌ μ μμ΅λλ€. μ΄ λΈλ‘κ·Έ κ²μλ¬Όμμλ CSS Regionsμ λ³Έμ§, μ μ¬μ μμ© λΆμΌ, κ·Έλ¦¬κ³ μΉ λμμΈμμ λ μ΄μμ κ΄λ¦¬μ λ°μ μ λν΄ μμΈν μμλ΄ λλ€.
CSS Regionsλ 무μμΈκ°? κ°λ μ κ°μ
CSS Regionsλ μ¬λ¬ 컨ν μ΄λ, μ¦ '리μ (region)' μ¬μ΄λ‘ μ½ν μΈ λ₯Ό νλ₯΄κ² νμ¬ λ 볡μ‘νκ³ λμ μΈ λ μ΄μμμ κ°λ₯νκ² νλ λ°©λ²μ μ 곡νμ΅λλ€. μ λ¬Έ κΈ°μ¬κ° μ΄λ―Έμ§λ λ€λ₯Έ μκ°μ μμ μ£Όμλ₯Ό μμ°μ€λ½κ² κ°μΈλ κ²μ μμν΄ λ³΄μΈμ. CSS Regions μ΄μ μλ μ΄λ¬ν λ μ΄μμμ΄ λ³΅μ‘ν ν΅(hack)μ΄λ μμλ°©νΈμ ν΅ν΄ ꡬνλλ κ²½μ°κ° λ§μμ΅λλ€. CSS Regionsλ₯Ό μ¬μ©νλ©΄ μ½ν μΈ λ₯Ό μ μν λ€μ λ€μν 리μ μ λ°°ν¬νμ¬ μκ°μ ννμ λν μ μ°μ±κ³Ό μ μ΄λ ₯μ λμΌ μ μμμ΅λλ€.
CSS Regionsμ ν΅μ¬μ 'μ½ν μΈ νλ¦' κ°λ μ μ€μ μ λ‘λλ€. μ½ν μΈ λΈλ‘μ μ§μ ν λ€μ, μ΄ μ½ν μΈ κ° νμλ μ¬λ¬ κ°μ μ¬κ°ν 리μ μ μ μνλ λ°©μμ λλ€. λΈλΌμ°μ λ νμμ λ°λΌ μ½ν μΈ λ₯Ό μλμΌλ‘ νλ₯΄κ² νκ³ , μ€ λ°κΏνλ©° λ°°ν¬ν©λλ€. μ΄λ νΉν λ€μκ³Ό κ°μ κ²½μ°μ μ μ©νμ΅λλ€:
- λ€μ€ μ΄ λ μ΄μμ: ν μ€νΈκ° μ¬λ¬ μ΄μ κ±Έμ³ νλ₯΄λ μ‘μ§ μ€νμΌμ λ μ΄μμμ λ§λλλ€.
- μ½ν μΈ μ€ λ°κΏ: ν μ€νΈκ° μ΄λ―Έμ§ λ° κΈ°ν μμ μ£Όμλ₯Ό μμ°μ€λ½κ² κ°μΈλλ‘ ν©λλ€.
- λμ μ½ν μΈ νμ: νλ©΄ ν¬κΈ°λ κΈ°κΈ° κΈ°λ₯μ λ°λΌ μ½ν μΈ ννμ μ‘°μ ν©λλ€.
CSS Regionsμ ν΅μ¬ κ°λ λ° μμ± (κ·Έλ¦¬κ³ κ·Έ λμ)
CSS Regions μ체λ λ체λμμ§λ§, κ·Έ ν΅μ¬ κ°λ μ μ΄ν΄νλ©΄ νλμ μΈ λ μ΄μμ λ°©λ²λ‘ μ μ΄ν΄νλ λ° λμμ΄ λ©λλ€. CSS Regionsμ κ΄λ ¨λ μ£Όμ μμ±μ λ€μκ³Ό κ°μμ΅λλ€:
flow-from: μ΄ μμ±μ νλ €λ³΄λ΄μΌ ν μμ€ μ½ν μΈ λ₯Ό μ§μ νμ΅λλ€. μ΄ μ½ν μΈ λ μ£Όλ‘ ν μ€νΈμμ§λ§ μ΄λ―Έμ§λ λ€λ₯Έ μμλ₯Ό ν¬ν¨ν μλ μμμ΅λλ€.flow-into: μ΄ μμ±μ νΉμ 'flow-from' μμ€λ‘λΆν° μ½ν μΈ λ₯Ό λ°μ 리μ μμ λνλ΄κΈ° μν΄ μμμ μ¬μ©λμμ΅λλ€.region-fragment: μ΄ μμ±μ μ½ν μΈ κ° λ¦¬μ κ°μ μ΄λ»κ² λΆν λ μ§λ₯Ό μ§μ ν μ μκ² νμ΅λλ€.
μ€μ μ°Έκ³ : μ΄ μμ±λ€μ λ μ΄μ μ΅μ λΈλΌμ°μ μμ CSS Regions μ¬μμμ μ²μ ꡬμλμλ λ°©μμ λ 립μ μΈ κΈ°λ₯μΌλ‘ μ κ·Ήμ μΌλ‘ μ§μλμ§ μμ΅λλ€. λμ , CSS Gridλ Flexboxμ κ°μ κΈ°μ μ΄ ν¨μ¬ λ κ°λ ₯νκ³ μ μ°ν λμμ μ 곡ν©λλ€. κ·Έλ¬λ μ½ν μΈ νλ¦μ μ μ΄νλ μμΉμ μ¬μ ν μ€μνλ©°, νμ¬μ λ°©λ²λ‘ λ€μ CSS Regionsμ μλ λͺ©νλ₯Ό ν¨κ³Όμ μΌλ‘ ν΄κ²°ν©λλ€.
CSS Regionsμ λμ: μ΅μ λ μ΄μμ κΈ°μ
μμ μΈκΈνλ―μ΄ CSS Regionsλ λ μ΄μ μ¬μ©λμ§ μμ§λ§, κ·Έ λͺ©νλ κ°λ ₯ν CSS κΈ°λ₯κ³Ό κΈ°μ μ μ‘°ν©μΌλ‘ κ°μ₯ μ μΆ©μ‘±λ©λλ€. μ°μν μ μ΄λ ₯κ³Ό μ μ°μ±μ μ 곡νλ μ΅μ λμλ€μ μ΄ν΄λ³΄κ² μ΅λλ€:
1. CSS Grid Layout
CSS Grid Layoutμ 2μ°¨μ 그리λ κΈ°λ° λ μ΄μμ μμ€ν μ λλ€. νλ‘―(float)μ΄λ ν¬μ§μ λ(positioning)μ μμ‘΄νμ§ μκ³ λ 볡μ‘ν μΉ λ μ΄μμμ λ μ½κ² λμμΈν μ μλλ‘ μ€κ³λμμ΅λλ€. CSS Gridμ μ£Όμ μ₯μ μ λ€μκ³Ό κ°μ΅λλ€:
- 2μ°¨μ μ μ΄: νκ³Ό μ΄μ λͺ¨λ μ μν μ μμ΄ λ§€μ° κ΅¬μ‘°μ μΈ λ μ΄μμμ΄ κ°λ₯ν©λλ€.
- λͺ μμ μΈ νΈλ ν¬κΈ° μ§μ : 그리λ νκ³Ό μ΄μ ν¬κΈ°λ₯Ό λͺ μμ μΌλ‘ μ μν μ μμ΅λλ€.
- κ°κ²© μ μ΄: Gridλ
gapμμ±μ μ¬μ©νμ¬ κ·Έλ¦¬λ μμ΄ν κ°μ κ°κ²©μ μ μ΄ν μ μμ΅λλ€. - μμ κ²ΉμΉκΈ°: Gridλ μμλ₯Ό κ²ΉμΉ μ μλ κΈ°λ₯μ μ 곡νμ¬ μ°½μμ μΈ λμμΈμ κ°λ₯νκ² ν©λλ€.
μμ (κ°λ¨ν 그리λ λ μ΄μμ):
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
}
.item {
padding: 10px;
border: 1px solid #ccc;
}
μ΄ μ½λλ λ κ°μ μ΄μ κ°μ§ 컨ν μ΄λλ₯Ό μ μν©λλ€. 첫 λ²μ§Έ μ΄μ μ¬μ© κ°λ₯ν 곡κ°μ 1fr(fraction)μ μ°¨μ§νκ³ , λ λ²μ§Έ μ΄μ 2frμ μ°¨μ§ν©λλ€. 컨ν μ΄λ λ΄λΆμ κ° μμ΄ν μ 그리λ μ μ νμλ©λλ€.
2. CSS Flexbox
CSS Flexboxλ μ μ°νκ³ λ°μνμΈ λ μ΄μμμ λ μ½κ² λμμΈν μ μλλ‘ μ€κ³λ 1μ°¨μ λ μ΄μμ μμ€ν μ λλ€. λ¨μΌ νμ΄λ μ΄ λ΄μμ μμ΄ν μ μ λ ¬νλ λ° νμν©λλ€. Flexboxμ μ£Όμ μ₯μ μ λ€μκ³Ό κ°μ΅λλ€:
- 1μ°¨μ μ μ΄: λ¨μΌ μΆ(ν λλ μ΄)μ ν¬ν¨νλ λ μ΄μμμ λ§€μ° μ ν©ν©λλ€.
- μ μ°ν μμ΄ν ν¬κΈ° μ‘°μ : νλ μ€ μμ΄ν μ μ¬μ© κ°λ₯ν 컨ν μ΄λ 곡κ°μ λ°λΌ 곡κ°μ μ½κ² λΆλ°°νκ³ ν¬κΈ°λ₯Ό μ‘°μ ν μ μμ΅λλ€.
- μ λ ¬ λ° λΆλ°°: Flexboxλ 컨ν μ΄λ λ΄μμ μμ΄ν μ μ λ ¬νκ³ λΆλ°°νκΈ° μν κ°λ ₯ν μμ±μ μ 곡ν©λλ€.
μμ (κ°λ¨ν νλ μ€λ°μ€ λ μ΄μμ):
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
border: 1px solid #ccc;
}
.item {
padding: 10px;
border: 1px solid #ccc;
}
μ΄ μ½λλ 컨ν μ΄λλ₯Ό νλ μ€ μ»¨ν μ΄λλ‘ μ μν©λλ€. 컨ν μ΄λ λ΄λΆμ μμ΄ν λ€μ μνμΌλ‘ μ λ ¬λλ©° κ·Έ μ¬μ΄μ 곡κ°μ΄ λΆλ°°λ©λλ€. μμ΄ν λ€μ 컨ν μ΄λμ μ€μμ μμ§μΌλ‘ μ λ ¬λ©λλ€.
3. λ€μ€ μ΄ λ μ΄μμ (Columns Module)
CSS Columns λͺ¨λμ CSS Regionsκ° μ²μμ μλνλ κ²κ³Ό λ§€μ° μ μ¬ν κΈ°λ₯μ μ 곡νλ©°, μ¬λ¬ λ©΄μμ μνλ λ€μ€ μ΄ ν¨κ³Όλ₯Ό λ¬μ±νκΈ° μν λ μ±μνκ³ λ리 μ§μλλ μ루μ μ λλ€. μ λ¬Έμ΄λ μ‘μ§μ²λΌ μ½ν μΈ κ° μ¬λ¬ μ΄μ κ±Έμ³ νλ¬μΌ ν λ νλ₯ν μ΅μ μ λλ€. CSS columnsμ μ£Όμ μ₯μ μ λ€μκ³Ό κ°μ΅λλ€:
- λ μ¬μ΄ λ€μ€ μ΄ λ μ΄μμ: μ΄μ μ, μ΄ λλΉ, μ΄ κ°κ²©μ μ μνλ μμ±μ μ 곡ν©λλ€.
- μλ μ½ν μΈ νλ¦: μ μλ μ΄ μ¬μ΄λ‘ μ½ν μΈ κ° μλμΌλ‘ νλ¦ λλ€.
- λ κ°λ¨ν ꡬν: μΌλ°μ μΌλ‘ μλμ CSS Regions μ¬μλ³΄λ€ κ°λ¨ν©λλ€.
μμ (λ€μ€ μ΄ λ μ΄μμ):
.container {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ccc;
}
μ΄ μ½λλ μΈ κ°μ μ΄, μ΄ μ¬μ΄μ 20px κ°κ²©, κ·Έλ¦¬κ³ μ΄ μ¬μ΄μ ꡬλΆμ (rule)μ κ°μ§ 컨ν μ΄λλ₯Ό λ§λλλ€. 컨ν μ΄λ λ΄λΆμ μ½ν μΈ λ μλμΌλ‘ μ΄ μ΄λ€λ‘ νλ¬ λ€μ΄κ°λλ€.
μ€μ©μ μΈ μ μ©: μ΄ κΈ°μ λ€μ΄ λΉμ λ°νλ κ³³
CSS Regionsλ ꡬμμ΄μ§λ§, νλμ μΈ λ μ΄μμ λ°©λ²μ μ μΈκ³μ λ€μν μ°μ κ³Ό μμ© νλ‘κ·Έλ¨μμ κ΄λ²μνκ² μ¬μ©λ©λλ€. λͺ κ°μ§ μλ λ€μκ³Ό κ°μ΅λλ€:
- λ΄μ€ μΉμ¬μ΄νΈ λ° λΈλ‘κ·Έ: κΈ°μ¬κ° μ¬λ¬ μ΄μ κ±Έμ³ μκ³ μ΄λ―Έμ§ λ° κΈ°ν λ―Έλμ΄λ₯Ό μννκ² ν΅ν©νλ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ μ΄μμμ λ§λλ κ²μ΄ μ€μν©λλ€. CSS Grid λ° Columnsμ κ°μ κΈ°μ μ 볡μ‘ν μ½ν μΈ λ°°ν¬λ₯Ό κ°λ₯νκ² ν©λλ€. BBC News (μκ΅)λ The New York Times (λ―Έκ΅)μ κ°μ μΉμ¬μ΄νΈλ μ΄λ¬ν λ μ΄μμ κΈ°μ μ κ΄λ²μνκ² μ¬μ©ν©λλ€.
- μ μμκ±°λ νλ«νΌ: 그리λλ‘ μ ν μΉ΄νλ‘κ·Έλ₯Ό νμνκ³ , 볡μ‘ν μΉ΄ν κ³ λ¦¬ λμ€νλ μ΄λ₯Ό μ²λ¦¬νλ©°, λ€μν κΈ°κΈ°μ λν λ°μν λμμΈμ μ 곡νλ κ²μ΄ νμμ μ λλ€. Amazon (κΈλ‘λ²)μ΄λ Alibaba (μ€κ΅)μ κ°μ μ£Όμ μ μμκ±°λ μ¬μ΄νΈλ μ΄λ¬ν κΈ°μ μ μ κ·Ήμ μΌλ‘ νμ©ν©λλ€.
- μ¨λΌμΈ μ‘μ§ λ° μΆνλ¬Ό: μ¨λΌμΈμμ μ‘μ§ κ°μ λ μ κ²½νμ μ 곡νλ €λ©΄ CSS Gridμ Flexboxλ‘ λ¬μ±ν μ μλ μ μ€ν μ½ν μΈ νλ¦κ³Ό λμ λ μ΄μμ μ μ΄κ° νμν©λλ€. Medium (κΈλ‘λ²)κ³Ό κ°μ μΉμ¬μ΄νΈμ λ€μν μ¨λΌμΈ μ λμ΄ μ΄λ₯Ό κΈ°λ°μΌλ‘ ꡬμΆλ©λλ€.
- λͺ¨λ°μΌ κΈ°κΈ°λ₯Ό μν λ°μν λμμΈ: Flexboxμ Gridλ λ€μν νλ©΄ ν¬κΈ°μ λ°©ν₯μμ μλ²½νκ² μλνλ μΉμ¬μ΄νΈλ₯Ό λ§λλ λ° κ°μ₯ μ€μν©λλ€. μ€λ§νΈν°μμ νλΈλ¦Ώμ μ΄λ₯΄κΈ°κΉμ§, μΌκ΄λ μ¬μ©μ κ²½νμ 보μ₯νλ κ²μ΄ μ€μν©λλ€.
- μΈν°λν°λΈ μΈν¬κ·Έλν½: μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ°μ΄ν° νλ μ ν μ΄μ μ λ§λ€λ €λ©΄ μ λ°ν λ μ΄μμ μ μ΄κ° νμνλ©°, μ΄λ CSS Gridμ Flexboxμ μ μ°μ±μΌλ‘ μ½κ² λ¬μ±ν μ μμ΅λλ€.
μ΅μ λ μ΄μμ κ΄λ¦¬λ₯Ό μν λͺ¨λ² μ¬λ‘
λ€μμ CSS Regionsκ° μ μν κΈ°λ³Έ μμ΄λμ΄λ₯Ό λ°νμΌλ‘ λ μ΄μμ κ΄λ¦¬ κΈ°λ₯μ κ·ΉλννκΈ° μν λͺ κ°μ§ μ€μν λͺ¨λ² μ¬λ‘μ λλ€:
- μλ§¨ν± HTML μ°μ μ¬μ©:
<article>,<nav>,<aside>,<section>)μ μ¬μ©νμ¬ μ½ν μΈ μ ꡬ쑰μ μλ―Έλ₯Ό λΆμ¬νμΈμ. μ΄λ μ κ·Όμ±κ³Ό SEOμ νμμ μ λλ€. - λ°μν λμμΈ μ±ν: λ°μνμ μΌλμ λκ³ λμμΈνμΈμ. λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νμ¬ νλ©΄ ν¬κΈ°, κΈ°κΈ° λ°©ν₯ λ° κΈ°ν μμΈμ λ°λΌ λ μ΄μμμ μ‘°μ νμΈμ. μ΄λ κΈλ‘λ² μΉ κ°λ°μ μμΉμΈ μ΄λ€ κΈ°κΈ°μμλ μΉμ¬μ΄νΈκ° λ©μ§κ² 보μ΄λλ‘ λ³΄μ₯ν©λλ€.
- μ κ·Όμ± μ΅μ ν: λ μ΄μμμ΄ μ₯μ κ° μλ μ¬μ©μμκ² μ κ·Ό κ°λ₯νλλ‘ λ³΄μ₯νμΈμ. ARIA μμ±μ μ¬μ©νκ³ , μ΄λ―Έμ§μ λ체 ν μ€νΈλ₯Ό μ 곡νλ©°, μ μ ν μμ λλΉλ₯Ό 보μ₯νμ¬ κΈλ‘λ² μ κ·Όμ± νμ€μ μΆ©μ‘±νμΈμ.
- μ±λ₯ μ°μ μ: λΆνμν μμμ 볡μ‘ν CSS κ·μΉμ μ¬μ©μ μ΅μννμΈμ. μ΄λ―Έμ§λ₯Ό μ΅μ ννκ³ λΈλΌμ°μ μΊμ±μ νμ©νμ¬ λΉ λ₯Έ λ‘λ© μκ°μ 보μ₯νμΈμ. νμ΄μ§ λ‘λ© μλλ νΉν μΈν°λ· μ°κ²°μ΄ λλ¦° μ§μμμ μ¬μ©μ κ²½νμ λ§€μ° μ€μν©λλ€.
- λ€μν λΈλΌμ°μ λ° κΈ°κΈ°μμ ν μ€νΈ: λ€μν λΈλΌμ°μ (Chrome, Firefox, Safari, Edge)μ κΈ°κΈ°(λ°μ€ν¬ν±, νλΈλ¦Ώ, μ€λ§νΈν°)μμ λ μ΄μμμ ν μ€νΈνμ¬ μΌκ΄λ λ λλ§μ 보μ₯νμΈμ. μ€μ κΈ°κΈ°μμμ ν μ€νΈλ λ§€μ° μ€μν©λλ€.
- CSS νλ μμν¬ μ¬μ© (λλ λ―Έμ¬μ©): Bootstrap, Tailwind CSS, Materializeμ κ°μ νλ μμν¬λ μ¬μ λΉλλ μ»΄ν¬λνΈμ λ μ΄μμ μμ€ν μ μ 곡ν©λλ€. μ΄λ κ°λ° μλλ₯Ό λμΌ μ μμ§λ§, μ μ€νκ² μ ννκ³ κ·Έ νκ³λ₯Ό μ΄ν΄ν΄μΌ ν©λλ€. λλ, λμμΈμ λν λ λ§μ μ μ΄λ₯Ό μν΄ "λ°λλΌ CSS" μ κ·Ό λ°©μμ μ±νν μλ μμ΅λλ€.
- νμ΅ λ° μ μ: μΉ κ°λ° νκ²½μ λμμμ΄ μ§νν©λλ€. μ΅μ CSS κΈ°λ₯κ³Ό κΈ°μ μ λν μ΅μ μ 보λ₯Ό μ μ§νμΈμ. μ§μμ μΈ νμ΅μ λ°μλ€μ΄κ³ , μ κ³ λΈλ‘κ·Έλ₯Ό νλ‘μ°νλ©°, μ¨λΉλλ 컨νΌλ°μ€μ μ°ΈμνμΈμ.
κΈλ‘λ² κ³ λ € μ¬ν λ° μ κ·Όμ±
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ νλ λ μ΄μμμ ꡬμΆν λ λ€μ μ¬νμ κ³ λ €ν΄μΌ ν©λλ€:
- νμ§ν(Localization): μΉμ¬μ΄νΈκ° λ€λ₯Έ μΈμ΄λ‘ μ½κ² νμ§νλ μ μλλ‘ νμΈμ. CSSμ ν μ€νΈλ₯Ό νλμ½λ©νλ κ²μ νΌνκ³ μ μ ν λ¬Έμ μΈμ½λ©μ μ¬μ©νμΈμ.
- λ¬Ένμ λ―Όκ°μ±: λμμΈ μ νΈλμ λν λ¬Ένμ μ°¨μ΄λ₯Ό μΌλμ λμΈμ. μλ₯Ό λ€μ΄, 곡백, μμ νλ νΈ, μ΄λ―Έμ§ μ ν λ±μ λ¬Ένμ λ°λΌ ν¬κ² λ€λ₯Ό μ μμ΅λλ€.
- μ κ·Όμ± νμ€ (WCAG): μΉ μ½ν μΈ μ κ·Όμ± κ°μ΄λλΌμΈ(WCAG)μ μ€μνμ¬ μ₯μ κ° μλ μ¬μ©μκ° μΉμ¬μ΄νΈμ μ κ·Όν μ μλλ‘ νμΈμ. μ΄λ―Έμ§μ λ체 ν μ€νΈλ₯Ό μ 곡νκ³ , μΆ©λΆν μμ λλΉλ₯Ό μ¬μ©νλ©°, ν€λ³΄λ νμμ΄ μλνλλ‘ λ³΄μ₯νμΈμ.
- κΈλ‘λ² μ¬μ©μλ₯Ό μν μ±λ₯ μ΅μ ν: μΈκ³ μΌλΆ μ§μμ μ¬μ©μλ μΈν°λ· μ°κ²°μ΄ λ릴 μ μμ΅λλ€. μ΄λ―Έμ§λ₯Ό μμΆνκ³ , CSS λ° JavaScriptλ₯Ό μ΅μννλ©°, μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)λ₯Ό μ¬μ©νμ¬ μΉμ¬μ΄νΈ μλλ₯Ό μ΅μ ννμΈμ.
- μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘(RTL) μ°λ μΈμ΄ μ§μ: μΉμ¬μ΄νΈκ° μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ°λ μΈμ΄(μ: μλμ΄, νλΈλ¦¬μ΄)λ₯Ό μ§μν΄μΌ νλ κ²½μ°, λ μ΄μμμ κ·Έμ λ§κ² λμμΈν΄μΌ ν©λλ€. CSSμμ
directionμμ±μ μ¬μ©νκ³ RTL νκ²½μμ μΉμ¬μ΄νΈλ₯Ό ν μ€νΈνμΈμ. - ν΅ν λ° λ μ§ νμ: μΉμ¬μ΄νΈκ° κΈμ κ±°λλ₯Ό μ²λ¦¬νκ±°λ λ μ§λ₯Ό νμνλ κ²½μ°, λ€λ₯Έ μ§μμ λ§κ² μ¬λ°λ₯΄κ² νμμ΄ μ§μ λμλμ§ νμΈνμΈμ. JavaScriptμ
IntlAPIλ κ΅μ νλ₯Ό μ²λ¦¬νλ λΌμ΄λΈλ¬λ¦¬λ₯Ό νμ©νμΈμ.
λ μ΄μμμ λ―Έλ: Regionsλ₯Ό λμ΄μ
CSS Regionsλ μ¬μ€μ μΈλͺ¨μκ² λμμ§λ§, μΉ λ μ΄μμμ λ°μ μ λΉ λ₯Έ μλλ‘ κ³μλκ³ μμ΅λλ€. CSS Grid, Flexbox λ° κΈ°ν λ μ΄μμ λꡬμ μ§νλ μΉ κ°λ°μλ€μ΄ μ΄μ μ½ν μΈ ννμ λν΄ μ΄μ λ³΄λ€ λ ν° μ μ΄λ ₯μ κ°κ² λμμμ μλ―Έν©λλ€. μ§μμ μΈ κ°λ° λ° μ€νμ μ£Όμ μμμ λ€μκ³Ό κ°μ΅λλ€:
- Subgrid: λΆλͺ¨ 그리λ 컨ν μ΄λμ 그리λ μ μλ₯Ό μμλ°μ μ μκ² ν΄μ£Όλ κ°λ ₯ν κΈ°λ₯μ λλ€. μ΄λ₯Ό ν΅ν΄ ν¨μ¬ λ 볡μ‘νκ³ μ€μ²©λ λ μ΄μμμ΄ κ°λ₯ν΄μ§λ©°, μ½ν μΈ νλ¦ κ΄λ¦¬κ° λ¨μνλ©λλ€.
- Container Queries: λ·°ν¬νΈλΏλ§ μλλΌ μ»¨ν μ΄λμ ν¬κΈ°μ λ°λΌ μμμ μ€νμΌμ μ μ΄ν μ μλ κ°λ ₯ν λ°©λ²μΌλ‘ λΆμνκ³ μμ΅λλ€. μ΄λ μ»΄ν¬λνΈ κΈ°λ° λμμΈμ ν¬κ² ν₯μμν€κ³ λ μ΄μμμ λ μ μμ± μκ² λ§λ€ μ μμ΅λλ€.
- Intrinsic Sizing and Layout: μ½ν μΈ μ ν¬κΈ°κ° λ μ΄μμμ μλ΄νλ, μ¦ λ΄μ¬μ ν¬κΈ° μ‘°μ μ μ²λ¦¬νλ λ°©μμ κ°μ νκΈ° μν μ§μμ μΈ λ Έλ ₯μ΄ μ΄λ£¨μ΄μ§κ³ μμ΅λλ€.
- Increased Adoption of Web Assembly (Wasm): Web Assemblyλ λ―Έλμ ν¨μ¬ λ μ§λ³΄λ λ μ΄μμ λ° λ λλ§ κΈ°λ₯μ μ΄λμ΄λΌ μ μμΌλ©°, λ 볡μ‘ν μ ν리μΌμ΄μ μ μΉμ ν΅ν©ν μ μκ² ν κ²μ λλ€.
κ²°λ‘
CSS Regionsλ μ½ν μΈ νλ¦κ³Ό κ³ κΈ λ μ΄μμ κ΄λ¦¬μ λ―Έλλ₯Ό μΏλ³Ό μ μκ² ν΄μ£Όμμ΅λλ€. μλ μ¬μμ λ μ΄μ μ¬μ©λμ§ μμ§λ§, κ·Έ κΈ°λ³Έ μμΉμ μ¬μ ν λ§€μ° μ€μν©λλ€. κ°λ°μλ€μ Grid, Flexbox, Column κΈ°λ₯κ³Ό κ°μ μ΅μ CSS κΈ°λ₯μ μ§μ€ν¨μΌλ‘μ¨ μ κ΅νκ³ λ°μνμΈ λμμΈμ λ¬μ±ν μ μμ΅λλ€. λ°μν λμμΈμ μμΉμ λ°μλ€μ΄κ³ , μ κ·Όμ±μ μ°μ μνλ©°, μ§μμ μΌλ‘ νμ΅νλ κ²μ μμ§ λ§μΈμ. μΉ λμμΈμ νμ μ μΈκ³ μ¬μ©μλ₯Ό μν΄ μννκ³ λ§€λ ₯μ μΈ κ²½νμ λ§λλ λ° μμ΅λλ€. μ½ν μΈ νλ¦μ ν΅μ¬ κ°λ μ μ΄ν΄νκ³ μ΅μ κΈ°μ μ κ³μ μ΅λν¨μΌλ‘μ¨ μ§μ ν κΈλ‘λ² μ¬μ©μλ₯Ό μν λμμΈμ ν μ μμ΅λλ€. μλ§¨ν± HTML, μ ꡬ쑰νλ CSS μμ€ν , κ·Έλ¦¬κ³ μ κ·Όμ±μ μ§μ€νμΈμ. κ·Έλ κ² ν¨μΌλ‘μ¨, μΉμ¬μ΄νΈκ° μκ°μ μΌλ‘ λ§€λ ₯μ μΌ λΏλ§ μλλΌ μμΉλ λ₯λ ₯μ κ΄κ³μμ΄ λͺ¨λ κ°μΈμκ² μ¬μ©μ μΉνμ μ΄ λλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ΄ μ κ·Ό λ°©μμ λμμμ΄ μ§ννλ μΉ κ°λ° μΈκ³μμ μ±κ³΅μ 보μ₯ν κ²μ λλ€.